<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="600px" @close="resetForm('addForm')">
      <!-- 兑换基本信息 -->
      <el-divider>兑换基本信息</el-divider>
      <el-form v-model="row" class="order-info">
        <el-form-item label="兑换码:">
          {{row.code}}
        </el-form-item>
        <el-form-item label="收货姓名:">
          {{row.clientName}}
        </el-form-item>
        <el-form-item label="收货电话:">
          {{row.clientPhone}}
        </el-form-item>
        <el-form-item label="收货地址:">
          {{row.clientCity}}{{row.clientDetail}}
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="success" class="copy-btn"
            v-clipboard="`${row.clientName} ${row.clientPhone} ${row.clientCity}${row.clientDetail}`" size="mini"
            v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制 “姓名 电话 地址”</el-button>
        </div>
      </el-form>

      <!-- 发货信息 -->
      <div style="padding-top: 20px;">
        <el-divider>发货信息</el-divider>
      </div>
      <el-form :model="form" status-icon :rules="rules" ref="addForm" label-width="80px" >
        <el-form-item label="发货单号" prop="send_code">
          <el-input v-model="form.send_code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发货日期" prop="send_date">
          <el-date-picker v-model="form.send_date" type="datetime" value-format="yyyy-MM-dd hh-mm-ss" placeholder="选择发货日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveExchange
  } from "@/api/exchange"
  export default {
    data() {
      return {
        currentProjectId: "",
        dialogFormVisible: false,
        dialogTitle: "",
        form: {},
        row: [],
        rules: {
          send_code: [{
            required: true,
            message: '发货单号不能为空',
            trigger: 'blur'
          }],
          send_date: [{
            required: true,
            message: '请选择发货日期',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.$bus.$on('onControlButtonClick', (row) => {
        this.dialogFormVisible = true;
        this.row = row;
        this.form = {
          id: row.id,
          send_code: "",
          send_date: "",
          status: 1
        }
        this.dialogTitle = '兑换管理'
      });
    },
    beforeDestroy() {
      this.$bus.$off('onControlButtonClick')
    },
    methods: {
      // 复制收货信息
      onCopySuccess() {
        this.$message({
          type: "success",
          message: "复制成功"
        })
      },
      onCopyError() {
        this.$message({
          type: "error",
          message: "复制失败"
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            saveExchange(this.form).then(res => {
              this.dialogFormVisible = false;
              this.$message({
                message: "操作成功！",
                type: "success"
              });
              this.$bus.$emit("onsaveOrderChange");
            }).catch(e => {
              console.log("error", e)
            })
          } else {
            console.log(this.form);
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog__body {
    padding-top: 0;

    .order-info {


      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
</style>
